<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大事件-后台首页</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./libs/jquery/jquery.min.js"></script>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>大事件-后台首页</title>
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/reset.css">
        <link rel="stylesheet" href="./css/iconfont.css">
        <link rel="stylesheet" href="./css/index.css">
        <script src="./libs/jquery/jquery.min.js"></script>
    </head>

    <body>
        <div class="sider">
            <a href="#" class="logo"><img src="./images/logo02.png" alt="logo"></a>
            <div class="user_info">
                <img class="userpic" src="http://localhost:8080/icon.jpg" alt="person">
                <span>欢迎&nbsp;&nbsp;<i>xxxx</i></span>
                <b>登录系统</b>
            </div>
            <!-- 左侧导航栏 -->
            <div class="menu">
                <div class="level01 active"><a href="./main_count.html" target="mainbox"><i
                        class="iconfont icon-yidiandiantubiao04"></i><span>首页</span></a></div>
                <div class="level01 l2"><a href="javascript:void(0)"><i
                        class="iconfont icon-icon-article"></i><span>文章管理</span>
                    <b class="iconfont icon-arrowdownl"></b></a>
                </div>
                <ul class="level02">
                    <!-- active 加到li标签上就可以实现菜单选中效果 -->
                    <li><a href="./article_list.html" target="mainbox"><i
                            class="iconfont icon-previewright"></i><span>文章列表</span></a></li>
                    <li><a href="./article_add.html" target="mainbox"><i
                            class="iconfont icon-previewright"></i><span>发表文章</span></a></li>
                    <li><a href="./artide_category.html" target="mainbox"><i
                            class="iconfont icon-previewright"></i><span>文章类别管理</span></a>
                    </li>
                </ul>

                <div class="level01"><a target="mainbox" href="./commen_tlist.html"><i
                        class="iconfont icon-comment"></i><span>评论管理</span></a></div>

                <div class="level01" id="user"><a target="mainbox" href="./user.html"><i
                        class="iconfont icon-user"></i><span>个人中心</span></a>
                </div>
            </div>
            <!-- 顶部栏 -->
            <div class="header_bar">
                <div class="user_center_link">
                    <a href="./user.html">个人中心</a>
                    <img src="http://localhost:8080/icon.jpg" class="userpic" alt="person">
                    <a href="javascript:void(0)" class="logout"><i class="iconfont icon-tuichu"></i> 退出</a>
                </div>
            </div>
            <!-- 右侧主体内容 -->
            <div class="main" id="main_body">
                <iframe name="mainbox" src="./main_count.html" frameborder="0" style="width: 100%;height:100%;"></iframe>
            </div>
        </div>
        <script src="./libs/layui/layui.js"></script>
        <script src="./js/ajaxPrefilter.js"></script>
        <script>
            let layer;
            layui.use('layer', function() {
                layer = layui.layer;

                // 调用 getUserInfo();
                getliang()
                geuli()
                getjiang()
            })

            function getliang() {
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8080/api/v1/admin/user/info',
                    // headers: {
                    //     Authorization: localStorage.getItem('token64') // 从本地存储中获取到用户登录后的token携带给服务器
                    // },
                    success: (res) => {
                        console.log(res)
                        if (res.code === 403) {
                            console.log(res.code);
                            layer.msg('您未登录', {
                                time: 500
                            }, function() {
                                // 跳转到首页
                                location.href = './login.html';
                            })
                        }

                        if (res.code !== 200) {
                            layer.msg(res.msg, {
                                time: 500
                            });
                            return;
                        }
                        $('.user_info i').html(res.data.nickname);
                        $('.userpic').prop('src', res.data.userPic);
                    },
                })
            }

            function geuli() {
                // 1.0 为菜单注册点击事件
                $('.l2').click(function() {
                    // 2.0 根据当前的事件对象获取到它的兄弟元素ul
                    $(this).next().slideToggle();

                    // 3.0 通过$(this).find 查到到b元素对象
                    let bobj = $(this).find('b');
                    if (bobj.hasClass('rotate0')) {
                        // 判断b元素身上如果有 rotate0 就移除之
                        bobj.removeClass('rotate0')
                    } else {
                        // 否则就在b元素身上加上rotate0
                        bobj.addClass('rotate0')
                    }
                })
            }

            function getjiang() {
                $('.level01,.level02 li').click(function() {
                    // 1.0 清除所有的一级和二级菜单上的active样式
                    $('.level01,.level02 li').removeClass('active');

                    // 2.0 给当前点击的菜单加上active
                    $(this).addClass('active');
                })
            }
        </script>

    </body>

    </html>